<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #square {
            width: 100px;
            height: 100px;
            background-color: rgb(248, 227, 135);
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #buttonn {
            width: 100px;
            height: 100px;
            font-size: 30px;
            padding: 0;
            cursor: pointer;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        
        body {
            margin: 0;
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="square">
        <button onclick="stopTanchuang()" id="buttonn">点我停止</button>
    </div>
    <script>
        const square = document.getElementById("square");
        var x = 0,
            y = 0;
        var speedx = 1,
            speedy = 1;
        const squareSize = 100;

        function tanchuang() {
            x += speedx;
            y += speedy;
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;

            if (x + squareSize > windowWidth) {
                x = windowWidth - squareSize;
                speedx = -speedx;
            } else if (x < 0) {
                x = 0;
                speedx = -speedx;
            }
            if (y + squareSize > windowHeight) {
                y = windowHeight - squareSize;
                speedy = -speedy;
            } else if (y < 0) {
                y = 0;
                speedy = -speedy;
            }
            square.style.left = `${x}px`;
            square.style.top = `${y}px`;
        }
        timer = setInterval(tanchuang, 1);
        tanchuang();

        function stopTanchuang() {
            clearInterval(timer);
        }
    </script>
</body>

</html>